<template>
  <view>
    <customtop top_title=""></customtop>
    <view class="friend_index" v-if="!loading">
      <view class="ptop">
        <image class="avatar" :src="user.avatar" mode="scaleToFill" />
        <view class="nickname">{{user.nickname}}</view>
      </view>
      <view class="actionbox">
        <view v-if="[0, 4].includes(user.friend_status)">
          <view class="btn" @click="requestFriend">添加好友</view>
        </view>
        <view v-if="user.friend_status == 1">
          <view class="btn" @click="storeConversation">发送消息</view>
        </view>
        <view v-if="user.friend_status == 2">
          <span class="span">对方待验证</span>
        </view>
        <view v-if="user.friend_status == 3">
          <span class="btn btn1" @click="agreeRequestFriend">同意</span>
          <span class="btn btn1 btn_reject" @click="rejectRequestFriend">拒绝</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"
export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      id: '',
      user: {},
    }
  },

  onLoad: function(options) {
    this.id = options.id;
    uni.showLoading();
    this.getFriend();
  },

  methods: {
    getFriend: function() {
      request.post('/im/getFriend', { id: this.id }).then(res => {
        this.loading = false;
        uni.hideLoading();
        this.user = res.data;
      })
    },

    storeConversation: function() {
      uni.showLoading();
      request.post('/im/storeConversation', {user_id: this.id}).then(res => {
        uni.hideLoading();
        if (res.code == 200) {
          uni.navigateTo({ url: '/pages/im/conversation?id=' + res.data });
        } else if (res.code == 400) {
          uni.showToast({ icon: 'none', title: res.message });
        } else {
          uni.showToast({ icon: 'none', title: res.message });
        }
      })
    },

    requestFriend: function() {
      let that = this;
      uni.showModal({
      	title: '提示',
      	content: '确认申请添加好友？',
      	success: function (res) {
      		if (res.confirm) {
      			uni.showLoading();
      			request.post('/im/requestFriend', {id: that.id}).then(res => {
      			  uni.hideLoading();
      			  if (res.code == 200) {
                that.getFriend();
      			    uni.showToast({ icon: 'none', title: res.message });
      			  } else if (res.code == 400) {
      			    uni.showToast({ icon: 'none', title: res.message });
      			  } else {
      			    uni.showToast({ icon: 'none', title: res.message });
      			  }
      			})
      		}
      	}
      });
    },

    agreeRequestFriend: function() {
      let that = this;
      uni.showModal({
      	title: '提示',
      	content: '确认同意添加好友？',
      	success: function (res) {
      		if (res.confirm) {
      			uni.showLoading();
      			request.post('/im/agreeRequestFriend', { id: that.id }).then(res => {
      			  uni.hideLoading();
      			  if (res.code == 200) {
      			    that.getFriend();
      			    uni.showToast({ icon: 'none', title: res.message });
      			  } else if (res.code == 400) {
      			    uni.showToast({ icon: 'none', title: res.message });
      			  } else {
      			    uni.showToast({ icon: 'none', title: res.message });
      			  }
      			})
      		}
      	}
      });
    },

    rejectRequestFriend: function() {
      let that = this;
      uni.showModal({
      	title: '提示',
      	content: '确认拒绝？',
      	success: function (res) {
      		if (res.confirm) {
      			uni.showLoading();
      			request.post('/im/rejectRequestFriend', { id: that.id }).then(res => {
      			  uni.hideLoading();
      			  if (res.code == 200) {
                that.getFriend();
                uni.showToast({ icon: 'none', title: res.message });
      			  } else if (res.code == 400) {
      			    uni.showToast({ icon: 'none', title: res.message });
      			  } else {
      			    uni.showToast({ icon: 'none', title: res.message });
      			  }
      			})
      		}
      	}
      });
    },

    switchTab: function(url) {
      uni.switchTab({ url: url });
    },

    jumpPage: function(url) {
      uni.navigateTo({ url: url });
    }
  }
}
</script>

<style>
@import url('im.css');
page {
  background-color: #fff;
}
</style>
